<template>
  <div :id="domId"></div>
</template>

<script lang='ts' setup>
import {onMounted, ref, watch, onBeforeUnmount} from 'vue';
import * as echarts from 'echarts';
import {useCommon} from '@/hooks/web/useCommon'

const props = defineProps({
  option: Object,
  domId: String,
})

let myChart = null

const {throttle, createFigure, chartRef} = useCommon()

onMounted(() => {
  chartRef.value = props.domId
  window.addEventListener("resize", throttle(createFigure, 500));
})

onBeforeUnmount(() => {
  echarts.dispose(myChart)
  myChart = null

})

const getChartsData = () => {
  var chartDom = document.getElementById(props.domId);
  myChart = echarts.init(chartDom, 'light');
  myChart.setOption(props.option);
}

watch(() => props.option, (value) => {
  let isTrue = Object.keys(value)
  if (isTrue.length) {
    getChartsData()
  }
}, {immediate: true})

</script>
<style scoped>
div {
  width: 100%;
  height: 500px;
}

#main1 {
  height: 700px;
}
</style>